<style>
  .item {
    border-bottom: 2px solid gray;
    margin-bottom: 10px;
  }
</style>
<div id="content">...正在加在数据</div>

<script src="./getjson.js"></script>
<script>
  // 一次取出所有商品数据（data1-3.json），显示完整商品列表
  // 每条数据的模版
  /*
  <div class='item'>
    <img src='图片'/>
    <div>
      <h2>标题</h2>
      <p>时间</p>
      <p>价格</p>
      <p>内容</p>
    </div>
  </div>
  */
// const arr = ['./data1.json','./data2.json','./data3.json']
// const pr = arr.map(a=>getJSON(a))
// Promise.all(pr)
// .then(e=>{
//   // console.log(e);
//   const p=e.reduce((a,b)=>{
//     return [...a,...b.data]
//   },[])
//   console.log(p)
//   document.getElementById('content').innerHTML=p.map((a)=>{
//       return `<div class='item'>
//     <img src='${a.article_pic}'/>
//     <div>
//       <h2>${a.article_title}</h2>
//       <p>${a.article_date}</p>
//       <p>${a.article_price}</p>
//       <p>${a.article_content}</p>
//     </div>
//   </div>`
//   }).join("")

// })


// const promises=[getJSON('./data1.js'),getJSON('./data2.js'),getJSON('./data3.js')]
const promises=[...Array(3)]
  .map((_,index)=>`./data${index+1}.json`)
  .map(url=>getJSON(url))
Promise.all(promises).then((datas)=>{
 const items= datas.reduce((items,data)=>{
     return items.concat(data.data)
 },[])
 document.getElementById('content').innerHTML=
 items.map(item=>
 `<div class='item'>
    <img src=${item.article_pic}/>
    <div>
      <h2>${item.article_title}</h2>
      <p>${item.article_date}</p>
      <p>${item.article_price}</p>
      <p>${item.article_content}</p>
    </div>
  </div>`).join("")
})


</script>
